<!DOCTYPE html>
<html>
    <head>
        <title>IEPM</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <%@include file = "global/include.jsp" %>
        <script type="text/javascript">
            window.history.forward();
            function noBack(){ window.history.forward(); }

            function onClickSubmit(){    
                var v=$('#loginForm').form('validate');
                
                if(v==true){
                    $('#loginForm').submit(); 
                }
            }
                        
            $(document).ready(function(){
                $('#industries').combobox({  
                    url:'FrontEndServlet?action=loadPage&content=getIndustries',  
                    valueField:'id',  
                    textField:'text',
                    editable:false,
                    formatter:comboboxFomatter,
                    required:true
                });
                
                $('#countries').combobox({  
                    url:'css/countries.json',
                    valueField:'text',  
                    textField:'text',
                    editable:false,
                    formatter:comboboxFomatter,
                    required:true
                });
                
                $('#sgMsg').hide();
                   
                $('#countries').combobox({onSelect:function(){
                        if($('#countries').combobox('getValue')!="Singapore"){
                            $('#sgMsg').show();}
                        else{
                            $('#sgMsg').hide();}
                    }});
                
                $('#countries').combobox('setValue',"Singapore");
                // Dialog			
                $('#dialog').dialog({
                    autoOpen: false,
                    width: 400,
                    height: 200,
                    show: "highlight",
                    buttons: {  
                        "Confirm": function() { 
                            var v=$('#emailForm').form('validate');
                
                            if(v==true){
                                $('#dialog').dialog('close');
                                var email= $('#email').val();
                                var email0= $('#email0').val();
                                $('#loadingDialog').dialog('open');
                                $(this).dialog("close"); 
                            
                                $.ajax({
                                    type: "POST",
                                    url: "FrontEndServlet",
                                    data: "action=retrieveReport&email="+email+"&email0="+email0,
                                    dataType: "json",
                                    cache: false,
                                    success: function(data){
                                        $('#loadingDialog').dialog('close');
                                        if(data=="success"){
                                            $('#successDialog').dialog('open');
                                        }else if(data=="email-failed"){
                                            $('#failedSendEmailDialog').dialog('open');
                                        }else{
                                            $('#failedDialog').dialog('open');
                                        }       
                                    }
                                });
                            }
                        }, 
                        "Cancel": function() { 
                            $(this).dialog("close"); 
                        } 
                    },
                    modal: true
                });
                
                $('#emailDialog').dialog({
                    autoOpen: false,
                    width: 400,
                    height: 200,
                    show: "highlight",
                    buttons: {  
                        "Confirm": function() { 
                            var v=$('#emailForm0').form('validate');
                
                            if(v==true){                
                                var email= $('#email0').val();
                                $('#loadingDialog').dialog('open');
                                $(this).dialog("close"); 
                            
                                $.ajax({
                                    type: "POST",
                                    url: "FrontEndServlet",
                                    data: "action=checkEmail&email="+email,
                                    dataType: "json",
                                    cache: false,
                                    success: function(data){
                                        $('#loadingDialog').dialog('close');
                                        if(data=="success"){
                                            $('#dialog').dialog('open');
                                        }else{
                                            $('#failedDialog').dialog('open');
                                        }       
                                    }
                                });
                            }           
                        }, 
                        "Cancel": function() { 
                            $(this).dialog("close"); 
                        } 
                    },
                    modal: true
                });
                
                $('#loadingDialog').dialog({
                    autoOpen: false,
                    width: 400,
                    height: 200,
                    modal: true
                });
                
                $('#successDialog').dialog({
                    autoOpen: false,
                    width: 400,
                    height: 200,
                    buttons: {
                        Ok: function() {
                            //$('#loadingDialog').dialog('close');
                            $( this ).dialog( "close" );
                        }
                    },
                    modal: true
                });
                
                $('#failedDialog').dialog({
                    autoOpen: false,
                    width: 400,
                    height: 200,
                    buttons: {
                        Ok: function() {
                            //$('#loadingDialog').dialog('close');
                            emailDialog();
                            $( this ).dialog( "close" );
                        }
                    },
                    modal: true
                });
                
                $('#failedSendEmailDialog').dialog({
                    autoOpen: false,
                    width: 400,
                    height: 250,
                    buttons: {
                        Ok: function() {
                            //$('#loadingDialog').dialog('close');
                            $( this ).dialog( "close" );
                        }
                    },
                    modal: true
                });
            });
            
            // Dialog Link
            function emailDialog(){
                $('#email').val("");
                $('#email0').val("");
                $('#emailDialog').dialog('open');
            } 
        </script>
    </head>
    <body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
        <div id="centerColumn" class="ui-widget ui-widget-content ui-corner-all">
            <%@include file = "global/header.jsp" %>
            <!--//Your Content//-->
            <h2 title="IT-Enabled Productivity Calculator" class="reflected">IT-Enabled Productivity Calculator</h2>
            <br/>
            <p>Augur et fulgente decorus arcu Phoebus acceptusque novem Camenis, qui salutari levat arte fessos corporis artus, si Palatinas videt aequos aras remque Romanam Latiumque felix alterum in lustrum meliusque semper prorogat aevom, quaeque Aventinum tenet Algidumque, quindecim Diana preces virorum curat et votis puerorum amicas adplicat auris.</p>
            <div id="centerContent" class=" ui-widget-content ui-corner-all">
                <form action="FrontEndServlet?action=proceedToIndustryQns" method="post" id="loginForm">
                    <br/>
                    <label for="industries">Industry: </label>
                    <select style="width:200px;" panelHeight="auto" name="industries" id="industries"></select>
                    <br/>
                    <br/>
                    <label for="countries">Country: </label>
                    <select style="width: 200px;" panelHeight="150px" name="countries" id="countries"></select>
                    <br/>
                    <div class="ui-widget" id="sgMsg">
                        <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
                            <p>
                                <span class="ui-icon ui-icon-info" style="float: left; margin-right: .7em;"></span>
                                The survey is applicable in Singapore only.
                            </p>
                        </div>
                    </div>
                    <br/>
                    <input onclick="onClickSubmit()" id="inputButton" type="button" value="Start"/>
                    <br/>
                </form>
            </div>
            <div class="ui-widget">
                <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
                    <p>
                        <span class="ui-icon ui-icon-info" style="float: left; margin-right: .7em;"></span>
                        <strong>Did the survey before? </strong>Click <a onclick="emailDialog()" href="javascript:void(0)">here</a> to retrieve your past results.
                    </p>
                </div>
            </div><br/>
            <%@include file = "global/footer.jsp" %>
        </div>
        <!--//end #centerColumn//-->
        <!-- ui-dialog -->
        <div id="dialog" style=" text-align: center" title="Retrieve Report">
            <br/>
            <form id="emailForm">
                <label for="industries">Confirm Email:</label>
                <input class="easyui-validatebox" id="email" name="email" type="text" required="true" validType="email"/>
            </form>
        </div>
        <div id="emailDialog" style=" text-align: center" title="Retrieve Report">
            <br/>
            <form id="emailForm0">
                <label for="industries">Email:</label>
                <input class="easyui-validatebox" id="email0" name="email0" type="text" required="true" validType="email"/>
            </form>
        </div>
        <div id="loadingDialog" style=" text-align: center" title="Retrieve Report">
            <img src="css/img/loading.gif" alt="loading"/>   
        </div>
        <div id="successDialog" style=" text-align: center" title="Retrieve Report">
            <p>Report(s) successfully sent to your email!</p> 
        </div>
        <div id="failedDialog" style=" text-align: center" title="Retrieve Report">
            <p>Invalid email!</p> 
        </div>
        <div id="failedSendEmailDialog" style=" text-align: center" title="Retrieve Report">
            <p>Email server is down!<br/>Your report(s) is unable to sent to you at this moment. Please try to retrieve it again later.</p> 
        </div>
    </body>
</html>
